<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #message-board {
            position: relative;
            width: 500px;
            height: 200px;
            background-color: orange;
        }
        form {
            position: absolute;
            width: 350px;
            top: 0;
            left: 50px;
        }
        form span{
            float: right;
        }
        form  #btn{
            width: 45px;
            float: right;
        }
        #message-area {
            position: absolute;
            margin-top: 10px;
            width: 500px;
            background-color: orange;
        }
        .mess {
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <div id="message-board" >
        <span>昵称：</span>
        <form action="" target="_parent">
            <input type="text" id="nikename" autocomplete="off"><br>
            <textarea type="" id="message-content" cols="35" rows="8"></textarea><br>
            <span><input type="checkbox" class="check">匿名</span><br>
            <input type="button" name="" id="btn" value="发表">
        </form>
    </div>
    <div id="message-area"></div>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        var $btn = $('div form input:button')
        var $nik = $('div form input:text')
        var $mess = $('div form textarea')
        var $area = $('#message-area')
        var $che = $('div form input:checkbox')
        // var $sp =$('<span></span>')
        // $che.prop('checked')
        // console.log($che.prop('checked'))
        $btn.click(function(){
            var v1 = $nik.val()
            var v2 = $mess.val()
            var date = new Date()
            var mytime = date.toLocaleTimeString()
            if (v1 !="" && v2 !="") {
                if ($che.prop('checked') == false) {
                    // 添加新元素，依次叠加
                    // var p = $('<p></p>')
                    $area.append($('<p></p>'))
                    // 找到新元素添加文本内容
                    $area.children('p').last().html(v1+"&nbsp;&nbsp;"+mytime+"<br>")
                    // 再添加一个新元素
                    $area.append($('<p></p>'))
                    // 设置新元素的内容
                    $area.children('p').last().html(v2+"&nbsp;&nbsp;").addClass("mess")
                } else{
                    $area.append($('<p></p>'))
                    // 找到新元素添加文本内容
                    $area.children('p').last().html("路人甲"+"&nbsp;&nbsp;"+mytime+"<br>")
                    // 再添加一个新元素
                    $area.append($('<p></p>'))
                    // 设置新元素的内容
                    $area.children('p').last().html(v2+"&nbsp;&nbsp;").addClass("mess")
                }
            } else{
                alert("昵称和内容都不能为空")
            }
        })
    </script>
</body>
</html>